<!-- 经典布局 -->
<template>
  <el-container class="layout">
    <el-header>
      <div class="header-lf mask-image">
        <div class="logo flx-center">
          <img class="logo-img" src="@/assets/images/logo.svg" alt="logo" />
          <span class="logo-text">{{ title }}</span>
        </div>
        <ToolBarLeft />
      </div>
      <div class="header-ri">
        <ToolBarRight />
      </div>
    </el-header>
    <el-container class="classic-content">
      <el-aside>
        <div class="aside-box" :style="{ width: isCollapse ? '65px' : '220px' }">
          <el-scrollbar>
            <el-menu
              :router="false"
              :default-active="activeMenu"
              :collapse="isCollapse"
              :collapse-transition="false"
              :unique-opened="true"
            >
              <SubMenu v-if="!isPanorama" :menu-list="menuList" />
              <PanoramaMenu v-else :menuList="menuList" :openDrawer="openDrawer" />
            </el-menu>
          </el-scrollbar>
        </div>
      </el-aside>
      <el-container class="classic-main">
        <Main />
        <el-drawer v-model="drawer" :with-header="false" :before-close="handleClose" direction="ltr">
          <div class="menu-gorup" v-for="menu in minorMenu" :key="menu.path">
            <h3 class="menu-title">{{ menu.meta!.title }}</h3>
            <div class="menu-list">
              <span class="menu-item" v-for="item in menu.children" :key="item.path" @click="handleClickMenu(item)">
                {{ item.meta!.title }}
              </span>
            </div>
          </div>
        </el-drawer>
      </el-container>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { useRoute, useRouter, type RouteRecordRaw } from "vue-router";
import { useAuthStore, useGlobalStore } from "@/stores";
import Main from "@/layouts/components/Main/index.vue";
import SubMenu from "@/layouts/components/MenuClassic/SubMenu.vue";
import PanoramaMenu from "@/layouts/components/MenuPanorama/PanoramaMenu.vue";
import ToolBarLeft from "@/layouts/components/Header/ToolBarLeft.vue";
import ToolBarRight from "@/layouts/components/Header/ToolBarRight.vue";

defineOptions({
  name: "LayoutClassic"
});

const title = import.meta.env.VITE_GLOB_APP_TITLE;

const route = useRoute();
const router = useRouter();
const useAuth = useAuthStore();
const useGlobal = useGlobalStore();
const menuList = ref<RouteRecordRaw[]>([]);
const drawer = ref<boolean>(false);
const minorMenu = ref<RouteRecordRaw[]>([]);
const isCollapse = computed(() => useGlobal.globalConfig.isCollapse);
const isPanorama = computed(() => useGlobal.globalConfig.isPanorama);
const staticRoute = router.options.routes.find((item) => item.path === "/layout");
menuList.value = [...(staticRoute?.children as Array<any>), ...useAuth.userMenu];
const activeMenu = computed(() => route.path);

/**
 * @description 打开抽屉
 * @param value
 */
const openDrawer = (value: RouteRecordRaw) => {
  if (!drawer.value) {
    drawer.value = true;
  }
  minorMenu.value = value.children || [];
};

/**
 * @description 菜单项点击路由跳转
 * @param item
 */
const handleClickMenu = (item: RouteRecordRaw) => {
  drawer.value = false;
  router.push(item.path);
};

/**
 * @description 关闭抽屉
 */
const handleClose = (done: () => void) => {
  drawer.value = false;
  done();
};
</script>

<style scoped lang="scss">
.el-container {
  width: 100%;
  height: 100%;
  :deep(.el-header) {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 55px;
    padding: 0 15px 0 0;
    background-color: var(--el-header-bg-color);
    border-bottom: 1px solid var(--el-header-border-color);
    .header-lf {
      display: flex;
      align-items: center;
      overflow: hidden;
      white-space: nowrap;
      .logo {
        // flex-shrink: 0;
        // margin-right: 16px;
        width: 210px;
        display: flex;
        .logo-img {
          width: 28px;
          object-fit: contain;
          margin-right: 6px;
        }
        .logo-text {
          font-size: 21.5px;
          font-weight: bold;
          color: var(--el-header-logo-text-color);
          white-space: nowrap;
        }
        .version-num {
          margin-left: 4px;
          font-size: 12px;
          line-height: 18px;
          align-self: flex-end;
        }
      }
    }
  }
  .classic-content {
    display: flex;
    height: calc(100% - 55px);
    :deep(.el-aside) {
      width: auto;
      background-color: var(--el-menu-bg-color);
      border-right: 1px solid var(--el-aside-border-color);
      .aside-box {
        display: flex;
        flex-direction: column;
        height: 100%;
        transition: width 0.3s ease;
        // background-color: var(--el-aside-bg-color);
        .el-menu {
          width: 100%;
          overflow-x: hidden;
          border-right: none;
          background-color: var(--el-aside-bg-color);
          .el-sub-menu__title,
          .el-menu-item {
            // margin: 5px 0px;
            box-sizing: border-box;
            overflow: hidden;
            background-color: var(--el-aside-item-color);
          }
        }
      }
    }
    .classic-main {
      display: flex;
      flex-direction: column;
      position: relative;
      :deep(.el-overlay) {
        // 此定位打开会印象全局的dialog对话框，设置此项是为了全景菜单预留
        // position: absolute;
        .menu-gorup {
          margin-bottom: 20px;
          .menu-title {
            height: 30px;
            font-size: 16px;
            font-weight: 600;
            color: var(--el-text-color-primary);
            border-bottom: 1px solid var(--el-border-color);
            cursor: default;
          }
          .menu-title::before {
            content: "";
            border-left: 4px solid $primary-color;
            margin-right: 4px;
          }
          .menu-list {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            .menu-item {
              margin: 10px 20px 10px 0px;
              font-size: 14px;
              font-weight: 400;
              list-style: none;
              cursor: pointer;
              color: var(--el-menu-text-color);
            }
            .menu-item:hover {
              color: $primary-color;
            }
          }
        }
      }
    }
  }
}
</style>
